<div data-controller="chats" class="component-chat-dialogue">
  <section class="dialogue-section" >
    <div class="dialogue-section-inner" >
    <% @chat_window.chat_messages.each do |message| %>
      <% if message.messageable_type == 'Shoper' %>
      <div class="dialogue-row dialogue-row--others">
        <%= image_tag(message.messageable.avatar.url, class: 'avatar') %>
        <div class="dialogue-item dialogue-item--others" ><%= message.content %></div>
      </div>
      <% elsif message.messageable_type == 'User' %>
      <div class="dialogue-row dialogue-row--self">
        <div class="dialogue-item dialogue-item--self" ><%= message.content %></div>
        <%= image_tag(message.messageable.avatar.url, class: 'avatar') %>
      </div>
      <% elsif message.messageable_type == 'Time' %>
      <div class="dialogue-row">
        <div class="dialogue-item--time" >2018-09-09</div>
      </div>
      <% end %>
    <% end %>
    </div>
  </section>
  <footer class="dialogue-footer" >
    <div class="component-dialogue-bar" >
      <%= form_tag mobile_chats_path, id: 'sayForm' do |f| %>
        <div class="dialogue-item">
          <div class="component-dialogue-bar-person">
            <div class="chat-way">
              <input name="token" type="hidden" value="<%= params[:token] %>" />
              <input name="messageable_id" type="hidden" value="<%= @user.id %>" />
              <input name="messageable_type" type="hidden" value="User" />
              <input name="chat_window_id" type="hidden" value="<%= @chat_window.id %>" />
              <input name="content" data-target="chats.say" data-action="keydown->chats#inputSay" class="chat-txt" type="text">
            </div>
            <button class="chat-btn" type="button" data-action="click->chats#saySubmit">发送</button>
          </div>
        </div>
      <% end %>
    </div>
  </footer>
</div>